<template>
  <div class="permissionList">
    <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input>
    <!-- 
        defaultProps:指定节点的显示内容、节点的子节点指向
        filterNode:过滤的方法（value,node） 
              this.$refs.tree.filter(val);这个val对应的是filterNode的value
    -->
    <el-tree
      class="filter-tree"
      :data="dataTree"
      node-key="ps_id"
      :props="defaultProps"
      :default-expanded-keys="[131]"
      check-on-click-node
      :filter-node-method="filterNode"
      ref="tree"
    >
    </el-tree>
  </div>
</template>

<script>
import { getPermissionList } from "@/api/role";

export default {
  name: "permissionList",
  data() {
    return {
      filterText: "",
      dataTree: [
        {
          ps_id: 1,
          ps_name: "商品管理",
          children: [
            {
              ps_id: 2,
              ps_name: "商品列表",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children", //指定节点指数对应的内容
        label: function (data, node) {
          //指定节点的显示内容 这里显示label
          return `${data.ps_name}(${data.ps_id})`;
        },
      },
    };
  },
  created() {
    getPermissionList().then(
      (res) => {
        if (res.data.status !== 200)
          return this.$message.error("获取权限列表失败");
        this.dataTree = res.data.data;
        // console.log(this.dataTree);
      },
      (err) => {
        this.$message.error("获取权限列表失败");
      }
    );
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    filterNode(value, node) {
      if (!value) return true;
      //只要包含输入内容的都可以显示
      return node.ps_name.indexOf(value) !== -1;
    },
  },
};
</script>

<style  scoped>
.permissionList {
  padding: 17px 20px;
}
::v-deep .el-tree {
  height: calc(100vh - 143px);
  overflow: auto;
  margin-top: 8px;
}
::v-deep .el-tree-node__content {
  padding-top: 6px;
}
::v-deep .el-tree-node__label {
  font-size: 15px;
}
</style>
